<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { timeFormat, toYuan, timeFormat_2, copyToCliboard, timeStamp } from '@/hooks/util'
import * as orderApi from '@/api/order'
import { message } from 'ant-design-vue'
import orderModal from './component/orderModal.vue'
import ImgView from './component/imgView.vue'
import orderRefund from './component/refundModal.vue'
import SearchDrawer from '@/components/search-drawer/Index.vue'

const searchDrawerRef = ref()

const route = useRoute()

let searchFlag = ref<boolean>(false)

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper?: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  // console.log(page, pageSize)
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  [propName: string]: any
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const dataSource = ref([])
const columns = [
  {
    title: '渠道信息',
    key: 'channelData',
    width: 500,
  },
  {
    title: '推广平台',
    key: 'planetForm',
    width: 300,
  },
  {
    title: '影院信息',
    key: 'cinemaInfo',
    width: 400,
  },
  {
    title: '电影信息',
    key: 'filmName',
    width: 400,
  },
  {
    title: '订单状态',
    key: 'orderStatus',
    width: 300,
  },
  {
    title: '报价信息',
    key: 'finalPrice',
    width: 300,
  },
  {
    title: '结算信息',
    key: 'finalInformPrice',
    width: 300,
  },
  {
    title: '时间信息',
    key: 'createTime',
    width: 300,
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
  },
]

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}
const imgViewRef = ref()

const getList = async () => {
  loading.value = true
  try {
    let { state, data, message: msg } = await orderApi.filmOrderListV2(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

// 翻译渠道
const getChannel = (num: string | number) => {
  if (num == 1) {
    return '微信'
  } else if (num == 2) {
    return '企业微信'
  } else if (num == 3) {
    return '闲鱼'
  }
}

const formRef = ref()
interface FormState {
  cinemaName?: string
  fansId?: string
  orderStatus?: string
  channel?: string
  userName?: string
  upstreamOrderNumber?: string
  orderNumber?: string
  [propName: string]: any
  time?: [any, any]
}
const formState = reactive<FormState>({})

// 时间 -----------------------------------------------------------------------------
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'

import type { Dayjs } from 'dayjs'
type RangeValue = [Dayjs, Dayjs] | [string, string] | undefined
let startTime = ref<string>()
let endTime = ref<string>()
const changeTime = (e: RangeValue | [string, string], dataString: [string, string]) => {
  console.log(dataString)
  startTime.value = dataString[0]
  endTime.value = dataString[1]
}

// 将选择范围控制在7天
import type { Moment } from 'moment'
const dates = ref<Moment[]>([])
const disabledDate = (current: Moment) => {
  if (!dates.value || dates.value.length === 0) {
    return false
  }
  const diffDate = current.diff(dates.value[0], 'days')
  return Math.abs(diffDate) > 6
}
const onCalendarChange = (val: Moment[]) => {
  dates.value = val
}

// 日期回显
// 获取当前时间的时间戳
let nowTimestamp = Date.now()
// 获取当前日期
let now = new Date()
// 设置日期为当前日期往前数7天
now.setDate(now.getDate() - 6)
// 获取7天前的时间戳
let sevenDaysAgoTimestamp = now.getTime()
// console.log('nowTimestamp=',nowTimestamp)
// console.log('sevenDaysAgoTimestamp=',sevenDaysAgoTimestamp)

function convertToTimestamp(dateString) {
  // 尝试将日期字符串转换为Date对象
  let date = new Date(dateString)
  // 检查转换是否成功（即Date对象不是无效的）
  if (!isNaN(date.getTime())) {
    // 返回时间戳
    return date.getTime()
  } else {
    // 如果转换失败，返回null或抛出错误
    return null // 或者 throw new Error("Invalid date string");
  }
}

function setTimeToMidnight(timestamp) {
  // 创建一个Date对象
  let date = new Date(timestamp)

  // 将时间设置为当天的00:00:00.000
  date.setHours(0, 0, 0, 0)

  // 将调整后的Date对象转换回毫秒级时间戳
  return date.getTime()
}

function setTimeToEndOfDay(timestamp) {
  // 创建一个Date对象
  let date = new Date(timestamp)

  // 将时间设置为当天的23:59:59.999
  date.setHours(23, 59, 59, 999)

  // 将调整后的Date对象转换回毫秒级时间戳
  return date.getTime()
}

function formatTimestampToDate(timestamp) {
  // 创建一个Date对象
  let date = new Date(timestamp)

  // 提取年份（getFullYear()直接返回四位年份）
  let year = date.getFullYear()

  // 提取月份，并加1（因为月份是从0开始的）
  let month = String(date.getMonth() + 1).padStart(2, '0')

  // 提取日期
  let day = String(date.getDate()).padStart(2, '0')

  // 拼接成年月日格式
  return `${year}-${month}-${day}`
}

import dayjs from 'dayjs'
formState.time = [dayjs(timeFormat(nowTimestamp)), dayjs(timeFormat(sevenDaysAgoTimestamp))]
// console.log('formState.time=', formState.time)
startTime.value = setTimeToMidnight(convertToTimestamp(formState.time[1]))
endTime.value = setTimeToEndOfDay(convertToTimestamp(formState.time[0]))
// console.log('startTime=', startTime.value)
// console.log('endTime=', endTime.value)

startTime.value = formatTimestampToDate(startTime.value)
endTime.value = formatTimestampToDate(endTime.value)

searchParams.value.beginTime = timeStamp(`${startTime.value} 00:00:00`)
searchParams.value.endTime = timeStamp(`${endTime.value} 23:59:59`)

onMounted(() => getList())

import type { SelectProps } from 'ant-design-vue'
const orderStatusList = ref<SelectProps['options']>([
  {
    label: '已创建',
    value: 1,
  },
  {
    label: '已提交',
    value: 2,
  },
  {
    label: '出票中',
    value: 3,
  },
  {
    label: '出票成功',
    value: 10,
  },
  {
    label: '已结算',
    value: 15,
  },
  {
    label: '出票失败',
    value: 20,
  },
  {
    label: '订单售后',
    value: 25,
  },
])
const channelList = ref<SelectProps['options']>([
  {
    label: '微信',
    value: 1,
  },
  {
    label: '企业微信',
    value: 2,
  },
  {
    label: '闲鱼',
    value: 3,
  },
])

// 查询
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    searchParams.value.cinemaName = formState.cinemaName || ''
    searchParams.value.fansId = formState.fansId || ''
    searchParams.value.orderStatus = formState.orderStatus || ''
    searchParams.value.channel = formState.channel || ''
    searchParams.value.userName = formState.userName || ''
    searchParams.value.upstreamOrderNumber = formState.upstreamOrderNumber || ''
    searchParams.value.orderNumber = formState.orderNumber || ''

    searchParams.value.beginTime = timeStamp(`${startTime.value} 00:00:00`)
    searchParams.value.endTime = timeStamp(`${endTime.value} 23:59:59`)

    getList()
  })
}

// search()

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.resetFields()
  for (let key in searchParams.value) {
    if (key != 'currentPage' && key != 'pageSize')
      searchParams.value.hasOwnProperty(key) && delete searchParams.value[key]
  }

  getList()
}
const orderDetailModelRef = ref()
// 充值时长
const orderDetailModelRefOpen = (record: any) => {
  orderDetailModelRef.value.showModal(record)
}

const PreviewModal = (list: any) => {
  imgViewRef.value.showModal(list)
}

//退款弹框
const refundModalRef = ref()
const refundModalRefOpen = (record: any) => {
  refundModalRef.value.showModal(record)
}
// 尝试拦截
const intercept = async (id: string) => {
  // try {
  //   let { state, message: msg } = await orderApi.orderIntercept({ id })
  //   if (state === 200) {
  //     message.success('拦截成功！')
  //   } else {
  //     message.error(msg)
  //   }
  // } catch (error) {
  //   message.error('网络请求连接失败~')
  // }
}

const handleSettle = async (orderId: string) => {
  try {
    let { state, message: msg } = await orderApi.orderSettle({ orderId })
    if (state === 200) {
      message.success('操作成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const advancedSearch = () => {
  searchDrawerRef.value.showDrawer()
}
</script>

<template>
  <page-container :title="route.meta.title">
    <a-card style="overflow-x: scroll">
      <div class="searchBox">
        <a-form ref="formRef" layout="inline" :model="formState" class="formClass">
          <a-form-item label="用户手机号" name="userName">
            <a-input
              v-model:value="formState.userName"
              placeholder="用户手机号"
              style="width: 200px"
            />
          </a-form-item>

          <a-form-item label="平台单号" name="orderNumber">
            <a-input
              v-model:value="formState.orderNumber"
              placeholder="平台单号"
              style="width: 200px"
            />
          </a-form-item>

          <a-form-item label="渠道单号" name="upstreamOrderNumber">
            <a-input
              v-model:value="formState.upstreamOrderNumber"
              placeholder="渠道单号"
              style="width: 200px"
            />
          </a-form-item>

          <SearchDrawer ref="searchDrawerRef">
            <div>
              <a-form-item label="用户手机号" name="userName">
                <a-input
                  v-model:value="formState.userName"
                  placeholder="用户手机号"
                  style="width: 234px"
                />
              </a-form-item>

              <a-form-item label="平台单号" name="orderNumber">
                <a-input
                  v-model:value="formState.orderNumber"
                  placeholder="平台单号"
                  style="width: 250px"
                />
              </a-form-item>

              <a-form-item label="渠道单号" name="upstreamOrderNumber">
                <a-input
                  v-model:value="formState.upstreamOrderNumber"
                  placeholder="渠道单号"
                  style="width: 250px"
                />
              </a-form-item>

              <a-form-item label="影院名称" name="cinemaName">
                <a-input
                  v-model:value="formState.cinemaName"
                  placeholder="影院名称"
                  style="width: 250px"
                />
              </a-form-item>

              <a-form-item label="订单状态" name="orderStatus">
                <a-select
                  v-model:value="formState.orderStatus"
                  placeholder="订单状态"
                  style="width: 250px"
                  allowClear
                >
                  <a-select-option
                    v-for="(item, index) in orderStatusList"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <!-- start -->
              <!-- <a-form-item label="粉丝ID" name="fansId" v-show="searchFlag">
                <a-input v-model:value="formState.fansId" placeholder="粉丝ID" />
              </a-form-item> -->

              <a-form-item label="平台查询" name="channel">
                <a-select
                  v-model:value="formState.channel"
                  placeholder="平台"
                  allowClear
                  style="width: 250px"
                >
                  <a-select-option
                    v-for="(item, index) in channelList"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="时间查询" name="time">
                <a-range-picker
                  v-model:value="formState.time"
                  :disabledDate="disabledDate"
                  @calendarChange="onCalendarChange"
                  :locale="locale"
                  :placeholder="['开始日期', '结束日期']"
                  @change="changeTime"
                  style="height: 32px; line-height: 32px; width: 250px"
                />
              </a-form-item>

              <a-form-item style="text-align: right">
                <a-button type="primary" @click="search">搜索</a-button>
                <a-button @click="reset" style="margin-left: 10px">重置</a-button>
              </a-form-item>
            </div>
          </SearchDrawer>

          <!-- <a-form-item style="margin-left: -8px">
            <div
              style="
                display: flex;
                align-items: center;
                color: #1890ff;
                justify-content: center;
                margin-left: 8px;
                cursor: pointer;
              "
              @click="() => (searchFlag = !searchFlag)"
            >
              <div style="margin-top: 2px">{{ searchFlag ? '收起' : '展开' }}</div>
              <UpOutlined
                :style="{
                  transform: !searchFlag ? 'rotate(180deg)' : 'rotate(0)',
                  transition: '0.5s',
                  color: '#1890ff',
                  fontSize: '14px',
                  marginLeft: '8px',
                }"
              />
            </div>
          </a-form-item> -->

          <!-- end -->
          <a-form-item>
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button @click="reset">重置</a-button>
            <a-button type="primary" @click="advancedSearch">高级搜索</a-button>
          </a-form-item>
        </a-form>
      </div>

      <a-alert
        description="小提示：只要鼠标在表格上，按住左Shift键并滚动鼠标滚轮就可以横向滚动表格"
        type="info"
        banner
        style="margin-bottom: 10px; padding: 10px"
      />

      <a-table
        style="overflow-x: scroll"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        @change="changePage"
        rowKey="id"
        :scroll="{ x: 100 }"
        size="small"
      >
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #headerCell="{ column }">
          <template v-if="column.key === 'id'">
            <span>id</span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'cinemaInfo'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="影院名称">
                <a-tooltip placement="top">
                  <template #title>
                    <span>{{ record.cinemaName }}</span>
                  </template>
                  <span class="hiddenText">{{ record.cinemaName }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="院线">{{ record.lineName || '-' }}</a-descriptions-item>
              <a-descriptions-item label="城市">{{ record.city || '-' }}</a-descriptions-item>
              <a-descriptions-item label="影院地址">
                <a-tooltip placement="top">
                  <template #title>
                    {{ record.cinemaAddress || '-' }}
                  </template>
                  <span class="hiddenText">{{ record.cinemaAddress || '-' }}</span>
                </a-tooltip>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'filmName'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="影片">
                <a-tooltip placement="top">
                  <template #title>
                    {{ record.filmName || '-' }}
                  </template>
                  <span class="hiddenText">{{ record.filmName || '-' }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="影厅">
                <a-tooltip placement="top">
                  <template #title>
                    {{ record.showName || '-' }}
                  </template>
                  <span class="hiddenText">{{ record.showName || '-' }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="场次">
                {{ timeFormat(record.showTime) || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="座位">
                <a-tooltip placement="top">
                  <template #title>
                    <span
                      v-if="record?.seatNos"
                      v-for="item in record?.seatNos.split(',')"
                      :key="item"
                    >
                      {{ item }}
                      <span v-if="item.changeStatus == 0">未换座</span>
                      <span v-if="item.changeStatus == 1">已换座</span>
                    </span>
                  </template>
                  <span class="hiddenText" style="position: relative; top: 4px">
                    <a-tag
                      style="line-height: 16px"
                      v-if="record?.seatNos"
                      v-for="item in record?.seatNos.split(',')"
                      :key="item"
                    >
                      {{ item }}
                      <span v-if="item.changeStatus == 0">未换座</span>
                      <span v-if="item.changeStatus == 1">已换座</span>
                    </a-tag>
                  </span>
                </a-tooltip>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'finalPrice'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="原价" v-if="record.submitPrice && record.seatCount">
                ￥{{ toYuan(record.submitPrice) || '-' }} / ￥{{
                  (toYuan(record.submitPrice) * record.seatCount).toFixed(2)
                }}
              </a-descriptions-item>
              <a-descriptions-item label="原价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="自购价" v-if="record.imagePrice">
                ￥{{ (toYuan(record.imagePrice) / record.seatCount).toFixed(2) || '-' }} /￥{{
                  toYuan(record.imagePrice)
                }}
              </a-descriptions-item>
              <a-descriptions-item label="自购价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="报价" v-if="record.finalPrice">
                ￥{{ toYuan(record.finalPrice) || '-' }} /￥{{
                  (toYuan(record.finalPrice) * record.seatCount).toFixed(2)
                }}
              </a-descriptions-item>
              <a-descriptions-item label="报价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item
                label="降价"
                v-if="record.depreciate && record.depreciate != '0'"
              >
                ￥{{ toYuan(record.depreciate) }}
              </a-descriptions-item>

              <a-descriptions-item label="限价" v-if="record.limitPrice">
                ￥{{ toYuan(record.limitPrice) || '-' }} /￥{{
                  (toYuan(record.limitPrice) * record.seatCount).toFixed(2)
                }}
              </a-descriptions-item>
              <a-descriptions-item label="限价" v-else>{{ '-' }}</a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'finalInformPrice'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="出票价" v-if="record.orderFinalPrice">
                ￥{{ toYuan(record.orderFinalPrice) || '-' }}/￥{{
                  (toYuan(record.orderFinalPrice) * record.seatCount).toFixed(2)
                }}
              </a-descriptions-item>
              <a-descriptions-item label="出票价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="实收价" v-if="record.payPrice">
                ￥{{ (toYuan(record.payPrice) / record.seatCount).toFixed(2) || '-' }} /￥{{
                  toYuan(record.payPrice)
                }}
              </a-descriptions-item>
              <a-descriptions-item label="实收价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="单座利润" v-if="record.profit">
                ￥{{
                  record.profit
                    ? (toYuan(record.profit) / record.seatCount).toFixed(2)
                    : '0.00' || '-'
                }}
              </a-descriptions-item>
              <a-descriptions-item label="单座利润" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="整单利润">
                <span v-if="record.profit > 0" style="color: #1890ff">
                  ￥{{ toYuan(record.profit) }}
                </span>
                <span v-else-if="record.profit < 0" style="color: red">
                  ￥{{ toYuan(record.profit) }}
                </span>
                <span v-else>￥{{ toYuan(record.profit) }}</span>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'channelData'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="平台单号">
                {{ record.orderNumber }}
                <a @click="copyToCliboard(record.orderNumber)"><CopyOutlined /></a>
              </a-descriptions-item>
              <a-descriptions-item label="渠道单号">
                {{ record.upstreamOrderNumber || '-' }}
                <a
                  v-if="record.upstreamOrderNumber != ''"
                  @click="copyToCliboard(record.upstreamOrderNumber)"
                >
                  <CopyOutlined />
                </a>
              </a-descriptions-item>
              <a-descriptions-item label="出票渠道">
                <a-tag v-if="record.matchChannel == 3" color="blue">麻花电影票（可限价）</a-tag>
                <a-tag v-if="record.matchChannel == 5" color="blue">芒果电影票（一口价）</a-tag>
                <a-tag v-if="record.matchChannel == 66" color="blue">芒果一口价</a-tag>
                <a-tag v-if="record.matchChannel == 88" color="blue">芒果电影票</a-tag>
                <a-tag v-if="record.matchChannel == 6" color="blue">哈哈电影票</a-tag>
                <a-tag v-if="record.matchChannel == 11" color="blue">守兔电影票（一口价）</a-tag>
                <a-tag v-if="record.matchChannel == 7" color="blue">守兔电影票（可限价）</a-tag>
                <a-tag v-if="record.matchChannel == 9" color="blue">哈哈电影快票（固定9折）</a-tag>
                <a-tag v-if="record.matchChannel == 8" color="blue">星驰电影票（一口价）</a-tag>
                <a-tag v-if="record.matchChannel == 10" color="blue">影划算电影票（可限价）</a-tag>

                <a-tooltip
                  placement="topLeft"
                  :title="record.masterReason"
                  v-if="record.masterReason != ''"
                >
                  <a style="margin-right: 10px"><question-circle-outlined style="color: red" /></a>
                </a-tooltip>
                <a-tag v-if="record.slaveMatchChannel == 66" color="blue">芒果一口价</a-tag>
                <a-tag v-if="record.slaveMatchChannel == 88" color="blue">芒果电影票</a-tag>

                <a-tag v-if="record.slaveMatchChannel == 3" color="blue">
                  麻花电影票（可限价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 5" color="blue">
                  芒果电影票（一口价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 6" color="blue">哈哈电影票</a-tag>
                <a-tag v-if="record.slaveMatchChannel == 11" color="blue">
                  守兔电影票（一口价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 7" color="blue">
                  守兔电影票（可限价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 9" color="blue">
                  哈哈电影快票（固定9折）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 8" color="blue">
                  星驰电影票（一口价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 10" color="blue">
                  影划算电影票（可限价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 0 && record.orderStatus >=3" color="blue">不使用</a-tag>

                <a-tooltip
                  placement="topLeft"
                  :title="record.slaveReason"
                  v-if="record.slaveReason != ''"
                >
                  <a style="margin-right: 10px"><question-circle-outlined style="color: red" /></a>
                </a-tooltip>

                <div v-if="record.matchChannel == 0">-</div>
              </a-descriptions-item>
              <a-descriptions-item label="限价模式">
                <!-- <a-tag v-if="record.matchChannel == 3 || record.matchChannel == 5" color="blue">
                  支持限价
                </a-tag>
                <a-tag v-if="record.matchChannel == 6 || record.matchChannel == 7" color="blue">
                  不支持限价
                </a-tag>
                <div v-if="record.matchChannel == 0">-</div> -->
                <a-tag v-if="record.limitPriceState == 1" color="blue">已限价</a-tag>
                <a-tag v-if="record.limitPriceState == 2" color="blue">未限价</a-tag>
                <a-tag v-if="record.limitPriceState == 0" color="red">未知</a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'planetForm'">
            <div>
              <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '110px' }">
                <a-descriptions-item label="推广平台">
                  {{ getChannel(record.channel) || '-' }}
                </a-descriptions-item>
                <a-descriptions-item label="平台账号">
                  {{ record.robotNickName || '-' }}
                </a-descriptions-item>
                <a-descriptions-item label="出票模式">
                  <a-tag v-if="record.orderPattern == 0" color="blue">人工创建</a-tag>
                  <a-tag v-if="record.orderPattern == 1" color="blue">手动模式</a-tag>
                  <a-tag v-if="record.orderPattern == 2" color="blue">自动模式</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="用户手机号">
                  {{ record.userName || '-' }}
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </template>

          <template v-else-if="column.key === 'orderStatus'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="粉丝支付">
                <div v-if="getChannel(record.channel) == '闲鱼'">
                  <a-tag color="green">请在app处理查看</a-tag>
                </div>
                <div v-else>
                  <a-tag v-if="record.payStatus == -1" color="red">已退款</a-tag>
                  <a-tag v-if="record.payStatus == 0" color="red">未支付</a-tag>
                  <a-tag v-if="record.payStatus == 1" color="green">已支付</a-tag>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="平台支付">
                <a-tag v-if="record.userPayStatus == -1" color="red">已退款</a-tag>
                <a-tag v-if="record.userPayStatus == 0" color="red">未支付</a-tag>
                <a-tag v-if="record.userPayStatus == 1" color="green">已支付</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="出票状态">
                <a-tag v-if="record.orderStatus == 2" color="blue">已提交</a-tag>
                <a-tag v-if="record.orderStatus == 1" color="blue">已创建</a-tag>
                <a-tag v-if="record.orderStatus == 3" color="blue">出票中</a-tag>
                <a-tag v-if="record.orderStatus == 10" color="green">出票成功</a-tag>
                <a-tag v-if="record.orderStatus == 20" color="red">出票失败</a-tag>
                <a-tag v-if="record.orderStatus == 25" color="red">订单售后</a-tag>
                <a-tag v-if="record.orderStatus == 15" color="blue">已结算</a-tag>
                <a-tooltip
                  placement="topLeft"
                  :title="record.failReason"
                  v-if="record.orderStatus == 20"
                >
                  <a><question-circle-outlined style="color: red" /></a>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="允许换座">
                <a-tag color="blue">九宫格换座</a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'action'">
            <div style="width: 180px">
              <a @click="orderDetailModelRefOpen(record)">订单详情</a>
            </div>

            <div
              style="width: 180px"
              v-if="(record.orderStatus == 10 || record.orderStatus == 15) && record.payStatus == 1"
            >
              <a @click="refundModalRefOpen(record)">订单退款</a>
            </div>
            <div style="width: 180px" v-else>
              <a style="color: #bababa">订单退款</a>
            </div>

            <div
              style="width: 180px"
              v-if="record.orderStatus == 10 && record.settleStatus == 0 && record.payStatus == 1"
            >
              <a-popconfirm
                title="您确认要手动结算吗？"
                ok-text="是"
                cancel-text="否"
                @confirm="handleSettle(record.orderId)"
              >
                <a>手动结算</a>
              </a-popconfirm>
            </div>
            <div v-else style="width: 180px">
              <a style="color: #bababa">手动结算</a>
            </div>
            <!-- <div style="width: 180px">
              <a style="color: rgb(186, 186, 186)">催促出票</a>
            </div> -->
          </template>

          <template v-else-if="column.key === 'createTime'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="创建时间">
                {{ timeFormat_2(record.createTime) }}
              </a-descriptions-item>

              <a-descriptions-item label="提交时间">
                {{ timeFormat_2(record.upstreamTime) }}
              </a-descriptions-item>

              <a-descriptions-item label="出票时间">
                {{ timeFormat_2(record.upstreamCallbackTime) }}
              </a-descriptions-item>

              <a-descriptions-item label="退款时间" v-if="record.orderStatus == 25">
                {{ timeFormat_2(record.refundTime) }}
              </a-descriptions-item>

              <a-descriptions-item label="结算时间" v-else>
                {{ timeFormat_2(record.settleTime) }}
              </a-descriptions-item>
            </a-descriptions>
          </template>
        </template>
      </a-table>
    </a-card>
    <orderModal
      ref="orderDetailModelRef"
      @refresh="getList"
      @ImagePreview="PreviewModal"
      :width="1000"
    ></orderModal>
    <ImgView ref="imgViewRef" :width="1000"></ImgView>
    <orderRefund ref="refundModalRef" @refresh="getList"></orderRefund>
  </page-container>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}

.aTag-seatNo:nth-child(n + 2) {
  margin-top: 3px;
}

.formClass {
  :nth-child(1) {
    margin-bottom: 2px;
  }
}

.searchBox {
  // margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}

a:hover {
  color: red;
}

.imgBox {
  width: 50px;
  height: 50px;

  img {
    height: 50px;
  }
}

.popoverImg {
  width: 300px;

  img {
    width: 100%;
  }
}

.robitStatusClass {
  text-align: center;
}
</style>
